/* 
    Created on : 14/12/2014, 03:58:48
    Author     : Edgar Eler <eler@edgar.systems>
*/
* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html {
    cursor: default;
}

body {
    background: black;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    color: white;
}

html, body {
    height: 100%;
}

#uav_map_canvas,
#controle_map_canvas {
    width:100%;
    height:100%;
    overflow: hidden;
}

.estrutura {
    display: table;
    width: 100%;
    height: 100%;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
}

.blank-50w {
    width: 2.6%;
}

.blank-50h {
    height: 4.6%;
}

.blank-100w {
    width: 5.2%;
}

.blank-100h {
    height: 9.2%;
}

.map {
    width: 44.8%;
}

.content {
    height: 86.2%;
}

.bg-red {
    background: red;
}

.bg-green {
    background: lime;
}

.bg-blue {
    background: blue;
}

.bg-yellow {
    background: yellow;
}

.bg-black {
    background: black;
}

.bg-white {
    background: white;
}

.w50 {
    width: 50%;
}

.box {
    padding: 3.125rem 3.125rem 6.250em 3.125rem;
}

#box1 {
    background: rgba(255,0,0,0.8);
}

#box2 {
    background: rgba(255,255,0,0.8);
}

.footer {
    position: absolute;
    bottom: 0;
    text-align: center;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    color: white;
    font-size: 3.125rem;
}

.footer div {
    vertical-align: middle;
}

.panel {
    vertical-align: top;
}

.panel img,
.panel span {
    display: block;
    margin: auto;
}

.panel > div {
    padding: 1.500rem 0 1.500rem 0;
}

.panel > div.clicked {
    background: #151515;
}

#btnUAV {
    display: none;
}

#map {
    position: relative;
}

#colors {
    display: none;
    height: 324px;
    width: 48px;
    padding: 6px 6px 0 6px;
    position: absolute;               /* 2 */
    top: 50%;                         /* 3 */
    transform: translate(0, -50%);
    background: rgba(0,0,0,0.8);
}

#colors div {
    width: 48px;
    height: 48px;    
    margin-bottom: 6px;
}

#colors div.clicked {
    width: 44px;
    height: 44px;
    border: 2px solid cyan;
}

.full {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 101;
    width:100%;
    height:100%;
    /*background: rgba(7,15,16,0.9);*/
    background: rgba(0,0,0,0.9);
    text-align: center;
}

#splash > div > img { 
    display: block;
    margin: auto;
    margin-bottom: 6.250rem;
}

#splash > div {
    margin-top: 9.375rem;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 3.750rem;
    color: white;
}

#splash > div > div {
    margin-top: 5.625rem;
    text-align: center;
}

#splash > div > div > span {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    font-size: 2.500rem;
    color: lime;
}

#splash > div > div > span:hover {
    color: white;
}

.titleFull {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 3.125rem;
    margin-top: 5.625rem;
    font-weight: 100;
    text-align: center;
}

#descMissao,
#listaDicas {
    width: 42%;
    min-width: 1000px;
    margin: auto;
    margin-top: 5.625rem;
    font-size: 1.250rem;
}

#tela01,
#tela02,
#tela03,
#tela04{
    display: none;
}

#tela02 img {
    display: block;
    margin: auto;
    margin-top: 5.625rem;
}

#tela03 {
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url();
    background: -moz-linear-gradient(left, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.9) 45%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.9) 55%, rgba(0,0,0,0.9) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.9)), color-stop(45%,rgba(0,0,0,0.9)), color-stop(50%,rgba(0,0,0,0)), color-stop(55%,rgba(0,0,0,0.9)), color-stop(100%,rgba(0,0,0,0.9))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.9) 45%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.9) 55%,rgba(0,0,0,0.9) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.9) 45%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.9) 55%,rgba(0,0,0,0.9) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.9) 45%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.9) 55%,rgba(0,0,0,0.9) 100%); /* IE10+ */
    background: linear-gradient(to right, rgba(0,0,0,0.9) 0%,rgba(0,0,0,0.9) 45%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.9) 55%,rgba(0,0,0,0.9) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6000000', endColorstr='#e6000000',GradientType=1 ); /* IE6-8 */
}

#title03,
#title04 {
    position: absolute;
    bottom: 0;
    padding: 5.625rem;
}